<template>
    <div class="register">
      <div class="header">
        <img class="icon1" src="../assets/img/刀.png" alt="">
        <h1>厨艺天堂</h1>
        <img class="icon2" src="../assets/img/叉.png" alt="">
      </div>
      <!-- 表单 -->
      <van-form @submit="onSubmit">
          <van-field 
              v-model="username" 
              name="uname" 
              label="用户名" 
              placeholder="请输入" />
  
        <van-field 
              v-model="password" 
              type="password" 
              name="upass" 
              label="密码" 
              placeholder="请输入"/>
  
        <van-field 
              v-model="password2" 
              type="password" 
              name="upass2" 
              label="确认密码" 
              placeholder="请输入"/>
  
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">立即注册</van-button>
        </div>
  
        <div>
            <router-link class="link" to="/login">已账号，马上登录?</router-link>
        </div>
      </van-form>
      <div class="bottom">
        <img src="../assets/img/铲.png" alt="">
        <img src="../assets/img/杯子.png" alt="">
        <img src="../assets/img/勺子.png" alt="">
        <img src="../assets/img/碗.png" alt="">
        <img src="../assets/img/筷子.png" alt="">
      </div>
      <div class="food_text">
        <span>美食不仅仅是满足，更是一种生活的艺术。这道佳肴，色彩斑斓，味道层次分明，让人回味无穷。</span>
      </div>
      <!--使用组件 跳转首页 -->
      <back-to></back-to>
    </div>
  </template>
  
  <script>
  // 导入组件
  import BackTo from '@/components/BackTo.vue'
  import { Toast , Dialog  } from 'vant'
  
  // 打开页面时
  // 初始化（获取存储在本地的所有用户信息）
  let sky_users = []
  let sky_users_str = localStorage.getItem("SKY_USERS")
  if(sky_users_str){
    // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
    sky_users = JSON.parse(sky_users_str)
  }
  
  export default {
    data() {
      return {
        username: '',
        password: '',
        password2: ''
      };
    },
    // 注册组件
    components: {
      BackTo
    },
    methods: {
  
      // 点击“注册”的业务逻辑
      onSubmit(values) {
        console.log('submit', values);
        // 解构赋值
        let  {uname, upass, upass2} = values;
        // 判断输入框是否为空
        if(uname == "" || upass == "" || upass2 == "") {
          // 弹窗提示
          // Toast.fail('输入框不能为空');
          Toast('输入框不能为空~');
          return false;
        }
        // 把用户信息放在本地（客户端）
        // 这个账号仅仅在我的电脑才有作用
        let arr = sky_users.filter(item=> item.username == uname )
  
        // 如果数组的长度大于0 ，说明这个账号已经存在
        if(arr.length > 0) {
          Toast(`"${uname}"已存在，不需要重新注册`)
        }
        else {
          // 希望用户长度8-16个字符    邮箱格式
          let regExp = /^[0-9a-zA-Z_]{4,8}@qq.com$/
          if(!regExp.test(uname)) {
            Toast('请输入邮箱格式文本')
            return false
          }
  
          if(upass.length < 6) {
            Toast('密码需要6位字符以上')
            return false
          }
  
          if(upass != upass2) {
             Toast.fail('两次输入的密码不一致')
             return false
          }
  
          // 执行注册的逻辑
          let obj = {}
          obj.id = Math.random().toString().slice(2)+"_"+(new Date().getTime())
          obj.username = uname
          obj.password = upass
  
          // 把这个obj对象丢数组中
          sky_users.push(obj)
  
          // 再把这个数组转成字符串
          let str =  JSON.stringify(sky_users)
          localStorage.setItem('SKY_USERS',str);
  
          // 给用户反馈“注册结果”
          Dialog.alert({
          message: '注册成功，跳转登录。',
          }).then(() => {
            // on close
            // 跳转登录页
            this.$router.push({path: '/login'})
          });
          
        }
      },
    },
  };
  </script>
  
  <style lang="less">
  @import '../common/less/varible.less';
  .register {
    padding-top: 120px;
    font-family: cmff;
    .header{
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      .icon1{
        width: 40px;
      }
      h1{
        font-size: 40px;
        color: @Color;
      }
      .icon2{
        width: 40px;
      }
    }
    .bottom{
      margin-top: 30px;
      display: flex;
      justify-content: center;
      img{
        width: 40px;
        margin: 15px;
      }
    }
    .food_text{
      padding: 0 20px;
      font-size: 16px;
      text-align: center;
      color: @Color;
      margin-top: 20px;
    }
    .van-button--normal {
      background-color:  @bgColor;
      border: 0;
    }
    .link {
      display: block;
      width: 100%;
      text-align: center;
      font-size: 16px;
      // text-decoration: underline;
      
    }
  }
  </style>